<!doctype html>
<html>
<head>
  <title>CodeMirror 2: YAML mode</title>
  <link rel="stylesheet" href="../../lib/codemirror.css">
  <script src="../../lib/codemirror.js"></script>
  <script src="yaml.js"></script>
  <link rel="stylesheet" href="../../theme/default.css">
  <style>.CodeMirror {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }</style>
  <link rel="stylesheet" href="../../css/docs.css">
</head>
<body>
<h1>CodeMirror 2: YAML mode</h1>

<form><textarea id="code" name="code">
  --- # Favorite movies
  - Casablanca
  - North by Northwest
  - The Man Who Wasn't There
  --- # Shopping list
  [milk, pumpkin pie, eggs, juice]
  --- # Indented Blocks, common in YAML data files, use indentation and new lines to separate the key: value pairs
  name: John Smith
  age: 33
  --- # Inline Blocks, common in YAML data streams, use commas to separate the key: value pairs between braces
  {name: John Smith, age: 33}
  ---
  receipt: Oz-Ware Purchase Invoice
  date: 2007-08-06
  customer:
  given: Dorothy
  family: Gale

  items:
  - part_no: A4786
  descrip: Water Bucket (Filled)
  price: 1.47
  quantity: 4

  - part_no: E1628
  descrip: High Heeled "Ruby" Slippers
  size: 8
  price: 100.27
  quantity: 1

  bill-to: &id001
  street: |
  123 Tornado Alley
  Suite 16
  city: East Centerville
  state: KS

  ship-to: *id001

  specialDelivery: >
  Follow the Yellow Brick
  Road to the Emerald City.
  Pay no attention to the
  man behind the curtain.
  ...
</textarea></form>
<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
</script>

<p><strong>MIME types defined:</strong> <code>text/x-yaml</code>.</p>

</body>
</html>
